<template>
	<view class="">
		<!-- 弹出层 -->
		<u-popup :show="show" :round="10" closeable  @close="close">
		  <view class="bg-white pb-3" style="border-radius: 50rpx;">
		  	<view class="text-center font-md mt-4">发票</view>
		    <view class="px-5 pb-4">
				<!-- 发票类型 -->
				<view class="my-3">
					<view class="text-main font-28 font-weight-bold">发票类型</view>
					<view class="invoiceStyle font-26 mt-3 active">电子发票</view>
				</view>
				<u-line color="#f2f2f2"></u-line>
				<!-- 发票抬头 -->
				<view class="py-3">
					<view class="text-main font-30 font-weight-bold">发票抬头</view>
					<view class="mt-3" style="display: flex;">
						<view class="invoiceStyle font-24 mr-2" v-for="item in invoiceTitle" :key="item.id" :class="{active: invoice.invoice_title === item.id}" style="width: 120rpx;"  @click="change(item.id)">{{item.name}}</view>
					</view>
					<!-- 个人 -->
					<view v-if="invoice.invoice_title === 1" class="flex my-3">
						<text class="font-28 pr-4">个人名称</text>
						<u-input class="font-28" border="none" placeholder="请输入个人名称" style="height: 35rpx;" v-model="invoice.invoice_name"></u-input>
					</view>
					<!-- 单位 -->
					<view v-else>
						<view class="flex my-3">
							<text class="font-28 pr-4">单位名称</text>
							<u-input class="font-28" border="none" placeholder="请输入单位名称" style="height: 35rpx;" v-model="invoice.invoice_name"></u-input>
						</view>
						<view class="flex my-3">
							<text class="font-28 pr-4">纳税人识别号</text>
							<u-input class="font-28" border="none" placeholder="请在此填写纳税人识别号" style="height: 35rpx;" v-model="invoice.taxpayer_num"></u-input>
						</view>
					</view>
				</view>
				<u-line color="#f2f2f2"></u-line>
				<!-- 收票人信息 -->
				<view class="my-3">
					<view class="text-main font-28 font-weight-bold">收票人信息</view>
					<view class="flex my-3">
						<text class="font-28 pr-4">收票人邮箱/微信</text>
						<u-input class="font-28" border="none" placeholder="请输入邮箱地址/微信" style="height: 35rpx;" v-model="invoice.contact_information"></u-input>
					</view>
				</view>
			</view>
			<u-line class="mt-4" color="#f2f2f2"></u-line>
			<!-- 底部 -->
			<view class="mt-3" style="display: flex;justify-content: center;">
			    <view class="confirmStyle" @click="submit">
			    	确定
			    </view>
			</view>	
		  </view>
		</u-popup>
	</view>
</template>

<script>
    export default {
		props: {
			show: Boolean
		},
		data() {
			return {
				invoiceTitle: [
					{id: 1, name: '个人'},
					{id: 2, name: '单位'}
				],
				invoice: {
					invoice_type: 1, // 发票类型
					invoice_title: 2, // 发票抬头
					invoice_name: '' ,// 个人与公司名称
					taxpayer_num: '' ,// 纳税人识别号
					contact_information: '', // 联系方式
				}
			}
		},
		methods: {
			change(id) {
				this.invoice.invoice_title = id
				this.invoice.invoice_name = ""
				this.invoice.taxpayer_num = ""
			},
			close() {
				uni.$emit('invoice',{show: false})
			},
			// 确定 提价
			submit() {
				console.log(this.invoice)
				uni.$emit('invoiceComfirm', {invoice:this.invoice ,show:false})
			}
		}
	}
</script>

<style>
	.confirmStyle {
		display: flex !important;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		background: linear-gradient(123deg, #ff5d26 0%, #ff5d26 100%);
		color: white;
		border-radius: 12rpx;
		width: 660rpx;
		height: 100rpx;
		margin-left: 10rpx;
		font-size: 36rpx;
	}
	.invoiceStyle{
		background-color: #f5f5f5;
		width: 200rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
	}
	
	
	/* 选中样式 */
	.active {
		background-color: #ffd6ca;
		color: #e06915;
	}
</style>